1. 我們定義了一個 my-input 元件，以符合設計稿需求
   

<template>
  <input class="my-input" type="text" placeholder="電話，例：0912-345-678">
</template>

<style lang="scss">
.my-input {
  font-size: 20px;
  padding: 5px 10px;
  border: 1px solid gray;
  border-radius: 5px;
  color: burlywood;
}
</style>

2. 接著在父元件使用 my-input 元件，父元件的 components 紀錄我們 import 進來的子元件

<template>
  <h1>父元件</h1>
  <myInput>
</template>

<script>
import myInput from "@/components/my-input.vue";
export default {
  components: {
    myInput
  }
}
</script>

3. 然後，為了讓 my-input 元件可以接收來自父元件的 value 跟處理 input 事件，我們需要在 my-input 元件裡的 <input> 做兩件事

• 將它的 value 綁定到一個名為 myValue 的 prop 上
• 在它 input 事件被觸發時，通過 $emit 拋出新的值跟自定義的 myInput 事件

<template>
  <input 
    class="my-input"
    :value="myValue"
    @input="$emit('myInput', $event.target.value)"
    type="text" 
    placeholder="電話，例：0912-345-678"
  >
</template>

<script>
export default {
  components: {
    props: ['myValue']
  }
}
</script>

4. 在父元件上也做兩件事

• 通過 my-input 元件定義好的 prop，也就是 myValue，來將父元件的 value 傳入到子元件
• 通過 my-input 元件拋出的事件，也就是 myInput，來觸發父元件的方法

<template>
  <h1>父元件</h1>
  <myInput :myValue='cellphone' @myInput="showEvent($event)">
</template>

<script>
import myInput from "@/components/my-input.vue";
export default {
  components: {
    myInput
  },
  data() {
    return {
      cellphone: null
    }
  },
  methods: {
    showEvent(event) {
      console.log(event)
    }
  }
}
</script>

要注意的是，我們在 my-input 元件是拋出 $event.target.value

@input="$emit('myInput', $event.target.value)"

所以父元件上的 $event 只是單純的 value 而已

@myInput="showEvent($event)"

5. 若需要整個事件只要在 my-input 元件拋出 $event 就可以了

@input="$emit('myInput', $event)"

這樣父元件上的 $event 就是事件

@myInput="showEvent($event)"